<template>
  <div class="app-container">
    <div class="app-title">
      <span>工资月结 </span>
    </div>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-col :span="1">
          <i
            :class="[treeShow ? 'el-icon-s-fold treeI': 'el-icon-s-unfold treeI']"
            @click="toggerTree"
          />
        </el-col>
        <div class="tap-fillet">
          <el-radio-group
            v-model="activeName"
            style="margin-left:4rem; width:700px; height:15px; margin-top:-57px "
          >
            <el-radio-button
              label="0"
              name="noMonthEnd"
            >未月结</el-radio-button>
            <el-radio-button
              label="1"
              name="monthEnd"
            >已月结</el-radio-button>
             <!-- <el-radio-button
              label="2"
              name="monthEndStop"
            >暂存</el-radio-button> -->
          </el-radio-group>
        </div>
      </el-col>
      <div class="filter-container">
        <el-col
          style="text-align:right;margin-top: -3px;"
          :span="16"
        >
          <!-- <el-button
            v-if="activeName === '1'"

            size="small"
            class="filter-item"
            style="margin-left: 10px;"
            type="primary"
          >
            撤销月结
          </el-button> -->
          <div v-if="activeName === '1'" class="salary-month">
            <span>月结月份：</span>
            <el-date-picker
              v-model="salaryMonth"
              type="month"
              placeholder="请选择月份"
              :clearable="false"
              value-format="yyyy-MM"
              :editable="false"
            />
          </div>
          <!-- <div v-if="activeName === '2'" class="salary-month">
            <span>暂存月份：</span>
            <el-date-picker
              v-model="salaryMonth"
              type="month"
              placeholder="请选择月份"
              :clearable="false"
              value-format="yyyy-MM"
              :editable="false"
            />
          </div> -->
           <div v-if="activeName === '0'" class="salary-month">
            <el-select
            v-model="isThirteenChange"
            clearable
            placeholder="月结分类"
            @change="Query"
          >
            <el-option
              v-for="item in isThirteens"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
          </div>
          <!-- <el-button
            size="small"
            class="filter-item"
            style="margin-left: 10px;"
            type="primary"
            @click="outPutFile"
          >
            导出
          </el-button> -->
          <el-button
            v-if="activeName === '0'"
            size="small"
            class="filter-item"
            style="margin-left: 10px;"
            type="primary"
            :loading="monthLoading"
            @click="MonthEnd"
          >
            月结
          </el-button>
<!-- 
             <el-button
            v-if="activeName === '0'"
            size="small"
            class="filter-item"
            style="margin-left: 10px;"
            type="primary"
            :loading="stopLoading"
            @click="MonthEndStop"
          >
            暂存
          </el-button> -->

           <el-button
            v-if="activeName === '1'"
            size="small"
            class="filter-item"
            style="margin-left: 10px;"
            type="primary"
            :loading="revokeMonthLoading"
            @click="revokeMonthEnd"
          >
            撤销月结
          </el-button>
     <!--       <el-button
            v-if="activeName === '2'"
            size="small"
            class="filter-item"
            style="margin-left: 10px;"
            type="primary"
            :loading="revokeMonthStopLoading"
            @click="revokeMonthEndStop"
          >
            撤销暂存
          </el-button> -->
          <!-- <el-button
            size="small"
            class="filter-item"
            style="margin-left: 10px;"
            type="primary"
            @click="processnode"
          >
            审核日志
          </el-button> -->
        </el-col>

      </div>
    </el-row>
    <div>
      <div style="margin-left:165px; position:absolute; margin-top:-40px">
        <img
          style="width:16px; height:16px;"
          :src="Processedimg"
        >
      </div>
      <div style="margin-left:80px; position:absolute; margin-top:-40px">
        <img
          style="width:16px; height:16px;"
          :src="Untreatedimg"
        >
      </div>
    </div>
    
    <div
      ref="box"
      class="box"
    >
      <div
        class="left"
        :class="[isActive ? 'wid':'wids']"
      >
        <div
          :class="[treeShow ? 'treeShow' : 'treeNotShow']"
          :style="{'height' : treeHeight + 'px'}"
        >
          <AgencyTree
            class="agencyTree"
            @handleTreeQuery="handleTreeQuery"
          />
        </div>
      </div>
      <div
        v-show="Show"
        class="resize"
        title="收缩侧边栏"
      />
      <div
        class="mid"
        :class="[isActive ? 'mids': 'min']"
      >
        <salaryMonthEndChildren
          :key="timer"
          ref="chil"
          :month="salaryMonth"
          :tab-pane="activeName"
          :tree-data="treeData"
          @monthEndCallback="monthEndCallback()"
          @revokeMonthEndCallback="revokeMonthEndCallback()"
          @makeSalaryDataCallback="makeSalaryDataCallback"
        />
       
      </div>
      <Drag ref="icon" />

    </div>
  </div>
</template>

<script>
import salaryMonthEndChildren from '@/views/financialAudit/children/salaryMonthEndChildren'
import AgencyTree from '@/components/tree/agencyTree'
import Drag from '@/components/Drag'
import { currentYearMonth } from '@/utils/date-util'
export default {
  name: 'ComplexTable',
  components: { salaryMonthEndChildren,AgencyTree, Drag },
  data() {
    return {
      isThirteens: [
        { code: '1', name: '多批次' },
        { code: '0', name: '每月工资' }
      ],
      salaryMonth: '',
      isThirteenChange:'',
      treeHeight: null,
      Show: false,
      isActive: true,
      treeShow: false,
      treeData: '',
      timer: '',
      monthLoading: false,
      stopLoading: false,
      revokeMonthLoading: false,
      revokeMonthStopLoading: false,
      activeName: '0',
      Untreatedimg: require('@/assets/images/select.png'),
      Processedimg: require('@/assets/images/processed.png')
    }
  },
  watch: {
    activeName(val) {
      this.timer = new Date().getTime()
      if (val === '0') {
        this.Processedimg = require('@/assets/images/processed.png')
        this.Untreatedimg = require('@/assets/images/select.png')
      } else {
        this.Processedimg = require('@/assets/images/blue.png')
        this.Untreatedimg = require('@/assets/images/blueselect.png')
      }
    }
  },
    beforeDestroy() {
    clearInterval(this.timer)
  },
  created() {
    this.salaryMonth = currentYearMonth(new Date())
  },
  mounted() {
    this.dragController()
    this.getTeHeight()
  },
  beforeMount() {
    window.addEventListener('resize', this.getTeHeight)
  },
  methods: {
    processnode() {
      this.$refs.chil.processnode()
    },
    getTeHeight() {
      this.treeHeight = window.innerHeight - 270
    },
    // 拖拽
    dragController() {
      this.$refs.icon.dragControllerDiv()
    },
    // 树显隐方法
    toggerTree() {
      this.treeShow = !this.treeShow
      this.isActive = !this.isActive
      this.Show = !this.Show
    },
    // 查询
    Query() {
      this.$refs.chil.listQuery.isThirteenChange = this.isThirteenChange
      this.$refs.chil.getList()
     
    },
    // 树方法
    handleTreeQuery(data) {
      this.treeData = data
      this.$refs.chil.handleTree(data)
    },
  //  showProgress() {
  //     this.makeLoading = true
  //     this.$refs.chil.show()
  //   },
    // 月结
    MonthEnd() {
      this.monthLoading = true
      this.$refs.chil.saveMonthEnd()
    },
    // //暂存
    // MonthEndStop() {
    //    this.stopLoading = true
    //   this.$refs.chil.saveMonthEndStop()
    // },
    makeSalaryDataCallback() {
      this.makeLoading = !this.makeLoading
      this.salaCardBank = ''
    },
    monthEndCallback() {
      this.monthLoading = !this.monthLoading
    },
    // monthEndStopCallback() {
    //   this.stopLoading = !this.stopLoading
    // },
    revokeMonthEnd() {
      this.revokeMonthLoading = true
      this.$refs.chil.revokeMonthEnd()
    },
    revokeMonthEndCallback() {
      this.revokeMonthLoading = false
    },
    //暂存
    // revokeMonthEndStop() {
    //   this.revokeMonthStopLoading = true
    //   this.$refs.chil.revokeMonthEndStop()
    // },
    // //暂存返回
    // revokeMonthEndStopCallback() {
    //   this.revokeMonthStopLoading = false
    // },
    // 导出
    outPutFile() {
      this.$refs.chil.outPutFile()
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/styles/border.scss"; /*引入公共样式*/

.app-title {
  margin-bottom: 15px;
  height: 20px;
  border-bottom: 1px solid #DCDFE6;
}
  .salary-month {
    display: inline-block;
    vertical-align: top;
  }

</style>
